<template>
	<div class="history-data-wp">
		<van-nav-bar :border="false" :placeholder="true" :fixed="true" title="Trung tâm trợ giúp" left-arrow
			@click-left="onClickLeft"></van-nav-bar>
		<div class="his-main">
			<div class="day-selector-wp">
				<div class="day-wp" @click="showPicker = true">
					<div class="iconfont icon-icon_calendar"></div>
					<div class="val">2021/11/14</div>
					<div class="iconfont icon-icon_drop_down_solid"></div>
				</div>
				<div class="wp-span">-</div>
				<div class="day-wp" @click="showPicker = true">
					<div class="iconfont icon-icon_calendar"></div>
					<div class="val">2021/11/14</div>
					<div class="iconfont icon-icon_drop_down_solid"></div>
				</div>
				<div class="search">Tìm kiếm</div>
			</div>
			<div class="lottery-selector-wp">
				<div class="tit">Chọn trò chơi</div>
				<div class="lottery-selector" @click="wpshow = true">
					<div class="t">Bình Định</div>
					<div class="iconfont icon-icon_more_blue_16"></div>
				</div>
			</div>
			<div class="results-list-wp">
				<div class="results-item-wp" @click="detailPicker = true" v-for="item in 4" :key="item">
					<div class="time">
						<p >202111170209</p>
						<p >2021/11/17 09:36:46</p>
					</div>
					<div class="balls-wp">
						<div class="ball"> 5 </div><div class="ball"> 1 </div><div class="ball"> 3 </div><div class="ball"> 3 </div><div class="ball"> 3 </div>
					</div>
				</div>
			</div>
			<div class="no-data">Không có dữ liệu xổ số</div>
		</div>
		<van-overlay :show="wpshow">
			<div class="overlay-wrapper">
				<div class="title"> Chọn thời gian <span @click="wpshow = false"
						class="overlay-xbtn iconfont icon-icon_close_white"></span></div>
				<div class="panel">
					<van-radio-group v-model="wpradio">
						<van-radio class="panel-item" name="1" checked-color="#e9cfa4">Toàn bộ</van-radio>
						<van-radio class="panel-item" name="2" checked-color="#e9cfa4">Khánh Hoà</van-radio>
						<van-radio class="panel-item" name="3" checked-color="#e9cfa4">Gia Lai</van-radio>
						<van-radio class="panel-item" name="4" checked-color="#e9cfa4">Bình Định</van-radio>
						<van-radio class="panel-item" name="5" checked-color="#e9cfa4">Đắk Lắk</van-radio>
						<van-radio class="panel-item" name="6" checked-color="#e9cfa4">Đắk Nông</van-radio>
						<van-radio class="panel-item" name="7" checked-color="#e9cfa4">Miền Bắc</van-radio>
						<van-radio class="panel-item" name="8" checked-color="#e9cfa4">Hồ Chí Minh VIP</van-radio>
						<van-radio class="panel-item" name="9" checked-color="#e9cfa4">Hà Nội VIP</van-radio>
						<van-radio class="panel-item" name="10" checked-color="#e9cfa4">Mega 6/45 1 Phút</van-radio>
						<van-radio class="panel-item" name="11" checked-color="#e9cfa4">Miền Bắc VIP 5 phút</van-radio>
					</van-radio-group>
				</div>
			</div>
		</van-overlay>
		<van-popup v-model="showPicker" round position="bottom">
			<div class="days-picker">
				<van-picker show-toolbar title="标题" :columns="columns" />
			</div>
		</van-popup>
		<van-popup v-model="detailPicker"  >
			<div  class="openResultPop">
				<div class="title"> Chi tiết 202111170208 </div>
				<div class="warp">
					<ul  class="lottoOpenNumberList port1">
						<li >
							<div class="przeName"> GB </div>
							<div class="openNum">533<font style="color:#1f61b2;">6</font>
								<font style="color:#1f61b2;">5</font>
							</div>
						</li>
						<li >
							<div class="przeName"> G1 </div>
							<div class="openNum">586<font style="color:#1f61b2;">3</font>
								<font style="color:#1f61b2;">6</font>
							</div>
						</li>
						<li >
							<div class="przeName"> G2 </div>
							<div class="openNum">488<font style="color:#1f61b2;">9</font>
								<font style="color:#1f61b2;">2</font>,624<font style="color:#1f61b2;">9</font>
								<font style="color:#1f61b2;">6</font>
							</div>
						</li>
						<li >
							<div class="przeName dbH"> G3 </div>
							<div class="openNum dbH">725<font style="color:#1f61b2;">9</font>
								<font style="color:#1f61b2;">0</font>,155<font style="color:#1f61b2;">1</font>
								<font style="color:#1f61b2;">4</font>,987<font style="color:#1f61b2;">8</font>
								<font style="color:#1f61b2;">6</font>,887<font style="color:#1f61b2;">6</font>
								<font style="color:#1f61b2;">1</font>,777<font style="color:#1f61b2;">9</font>
								<font style="color:#1f61b2;">8</font>,552<font style="color:#1f61b2;">6</font>
								<font style="color:#1f61b2;">7</font>
							</div>
						</li>
						<li >
							<div class="przeName"> G4 </div>
							<div class="openNum">09<font style="color:#1f61b2;">1</font>
								<font style="color:#1f61b2;">8</font>,08<font style="color:#1f61b2;">2</font>
								<font style="color:#1f61b2;">3</font>,01<font style="color:#1f61b2;">9</font>
								<font style="color:#1f61b2;">8</font>,67<font style="color:#1f61b2;">4</font>
								<font style="color:#1f61b2;">2</font>
							</div>
						</li>
						<li >
							<div class="przeName dbH"> G5 </div>
							<div class="openNum dbH">40<font style="color:#1f61b2;">1</font>
								<font style="color:#1f61b2;">2</font>,20<font style="color:#1f61b2;">3</font>
								<font style="color:#1f61b2;">8</font>,16<font style="color:#1f61b2;">8</font>
								<font style="color:#1f61b2;">2</font>,18<font style="color:#1f61b2;">8</font>
								<font style="color:#1f61b2;">6</font>,48<font style="color:#1f61b2;">3</font>
								<font style="color:#1f61b2;">9</font>,33<font style="color:#1f61b2;">9</font>
								<font style="color:#1f61b2;">2</font>
							</div>
						</li>
						<li >
							<div class="przeName"> G6 </div>
							<div class="openNum">2<font style="color:#1f61b2;">9</font>
								<font style="color:#1f61b2;">2</font>,4<font style="color:#1f61b2;">8</font>
								<font style="color:#1f61b2;">1</font>,8<font style="color:#1f61b2;">7</font>
								<font style="color:#1f61b2;">0</font>
							</div>
						</li>
						<li >
							<div class="przeName"> G7 </div>
							<div class="openNum">
								<font style="color:#1f61b2;">1</font>
								<font style="color:#1f61b2;">8</font>,<font style="color:#1f61b2;">8</font>
								<font style="color:#1f61b2;">4</font>,<font style="color:#1f61b2;">5</font>
								<font style="color:#1f61b2;">4</font>,<font style="color:#1f61b2;">2</font>
								<font style="color:#1f61b2;">7</font>
							</div>
						</li>
						<li  style="display: none;">
							<div class="przeName"> G8 </div>
							<div class="openNum"></div>
						</li>
						<li  style="display: none;">
							<div class="przeName"> </div>
							<div class="openNum"></div>
						</li>
					</ul>
					<ul  class="lottoOpenNumberList">
						<li >
							<div class="index bd1">0</div>
							<div class="calcNum"> </div>
						</li>
						<li >
							<div class="index bd1">1</div>
							<div class="calcNum"> 4,8,2,8 </div>
						</li>
						<li >
							<div class="index bd1">2</div>
							<div class="calcNum"> 3,7 </div>
						</li>
						<li >
							<div class="index bd1">3</div>
							<div class="calcNum"> 6,8,9 </div>
						</li>
						<li >
							<div class="index bd1">4</div>
							<div class="calcNum"> 2 </div>
						</li>
						<li >
							<div class="index bd1">5</div>
							<div class="calcNum"> 4 </div>
						</li>
						<li >
							<div class="index bd1">6</div>
							<div class="calcNum"> 5,1,7 </div>
						</li>
						<li >
							<div class="index bd1">7</div>
							<div class="calcNum"> 0 </div>
						</li>
						<li >
							<div class="index bd1">8</div>
							<div class="calcNum"> 6,2,6,1,4 </div>
						</li>
						<li >
							<div class="index bd1">9</div>
							<div class="calcNum"> 2,6,0,8,8,2,2 </div>
						</li>
					</ul>
				</div>
				<div @click="detailPicker = false" class="btnGroup"><button >Chắc chắn</button></div>
			</div>
		</van-popup>
	</div>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				wpshow: false,
				detailPicker:false,
				wpradio: '',
				showPicker: false,
				columns: [{
						text: '2021Năm',
						children: [{
								text: '10Tháng',
								children: [{
									text: '15Ngày'
								}, {
									text: '16Ngày'
								}],
							},
							{
								text: '11Tháng',
								children: [{
									text: '1Ngày'
								}, {
									text: '2Ngày'
								}],
							},
						],
					},
				],
			}
		},
		methods: {
			onClickLeft() {
				this.$router.go(-1)
			},
			onConfirm(value) {
				this.showPicker = false;
			},

		}
	}
</script>
<style>
</style>
